// ---------获取列表，渲染----------
function renderLink(){
  $.ajax({
    url:'/admin/links',
    success: function (res) {
      console.log(res);
      // let{变量, 变量 } = 对象;
      // let {} =
      if (res.status === 0) {
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.id}</td>
            <td>
            <div class="bg">
              <img src="http://localhost:8888/uploads/${item.linkicon}">
            </div>
          </td>
          <td>${item.linkname}</td>
          <td>${item.linkurl}</td>
          <td>${item.linkdesc}</td>
          <td>
            <button data-id="${item.id}" type="button" class="edit layui-btn layui-btn-xs ">
              编辑
            </button>
            <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">
              删除
            </button>
        </td>
          </tr>`
        });
        // 把拼接好的 多个 tr 放到 tbody 里
        $('tbody').html(str);
      }
    }
  });
}
renderLink();




// ------------添加友情链接----------------
$('#add-link').click(function () {
  addIndex = layer.open({
    type: 1,
    title: '添加友情链接',
    content: $('#add-form-tpl').html(),
    area: ['500px', '350px']
  })
  // 绑定文件上传按钮点击事件
  $('#urlIcon').click(function () {
    $('#linkFile').click()
  })
  // 监听文件选中事件
  $('#linkFile').change(function (e) {
    const objectURL = URL.createObjectURL(e.target.files[0])
    $('#preIcon').attr('src', objectURL)
  })
  // 绑定添加链接的提交事件
  $('#add-form').submit(function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    $.ajax({
      type: 'post',
      url: '/admin/links',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          // 刷新列表
          renderLink()
          // 关闭窗口
          layer.close(addIndex)
        }
      }
    })
  })
})


// --------------删除---------------
$('.layui-table tbody').on('click','.del',function(){
  let id = $(this).data('id')
  layer.confirm('你确定删除吗',function(index) {
    $.ajax({
      type:'delete',
      url:'/admin/links/' + id,
      success: function(res) {
        if( res.status === 0) {
          //关闭弹层
          layer.close(index)
          // 重新渲染页面
          renderLink();
        }
      }
    })
  })
})

// ------------编辑--------------
$('.layui-table tbody').on('click','.edit',function() {
  // 获取值
  // 因为上边用了data-id  所以这才可以用data('id');
  let id = $(this).data('id')

  // 获取友情链接数据
  $.ajax({
    type:'get',
    url:'/admin/links/' + id,
    success:function(res) {
      editIndex = layer.open({
        type: 1,
        title: '添加友情链接',
        content: $('#edit-form-tpl').html(),
        area: ['500px', '350px']

      })

      // 设置预览图片效果
      $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
      delete res.data.linkicon
      
      // 数据回填 让信息显示
      let form = layui.form;
      form.val('editForm', res.data); 

      // 绑定按钮点击上传事件
      $('#urlIcon').click(function(){
        $('#linkFile').click();
      })

      // 选中文件
      let file = null
      $('#linkFile').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0])
        file = e.target.files[0]
        $('#preIcon').attr('src', objectURL)
      })

      // 提交表单信息 提交表单事件  与添加提交一样
      $('#edit-form').submit(function(e){
        // 阻止默认行为  页面刷新
        e.preventDefault()
        let fd = new FormData(this)
        if (file) {
          fd.append('linkicon',file)
        }
        $.ajax({
          type:'put',
          url:'/admin/links/' + id,
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            if (res.status === 0) {
              // 刷新列表
              renderLink()
              // 关闭窗口
              layer.close(editIndex)
            }
          }
        })
      })
    }
  })
})








